import {
	fabric
} from "fabric";
import Hammer from 'hammerjs';

import verticalImg from './icons/middlecontrol.svg';
import horizontalImg from './icons/middlecontrolhoz.svg';
import edgeImg from './icons/edgecontrol.svg';
import rotateImg from './icons/rotateicon.svg';
import deleteImg from './icons/deleteicon.svg';

const img = document.createElement('img');
img.src = verticalImg;

const img2 = document.createElement('img');
img2.src = horizontalImg;

const img3 = document.createElement('img');
img3.src = edgeImg;

const img4 = document.createElement('img');
img4.src = rotateImg;

const img5 = document.createElement('img');
img5.src = deleteImg;


//头部描述
function renderImgText(ctx, left, top, styleOverride, fabricObject) {
	ctx.save();
	ctx.translate(left, top);
	ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
	ctx.fillText('双指进行缩放', -30, 0);
	// ctx.textAlign = 'center';
	// ctx.textBaseline = 'middle';
	// ctx.fillStyle = "#777"
	ctx.restore();
}

function renderText(ctx, left, top, styleOverride, fabricObject) {
	ctx.save();
	ctx.translate(left, top);
	ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
	ctx.fillText("点击进行编辑", -30, 0);
	ctx.restore();
}


// 两边中间图标
function renderIcon(ctx, left, top, styleOverride, fabricObject) {
	const wsize = 20;
	const hsize = 25;
	ctx.save();
	ctx.translate(left, top);
	ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
	ctx.drawImage(img, -wsize / 2, -hsize / 2, wsize, hsize);
	ctx.restore();
}

// 上下中间图标
function renderIconHoz(ctx, left, top, styleOverride, fabricObject) {
	const wsize = 25;
	const hsize = 20;
	ctx.save();
	ctx.translate(left, top);
	ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
	ctx.drawImage(img2, -wsize / 2, -hsize / 2, wsize, hsize);
	ctx.restore();
}

// 四角图标
function renderIconEdge(ctx, left, top, styleOverride, fabricObject) {
	const wsize = 25;
	const hsize = 25;
	ctx.save();
	ctx.translate(left, top);
	ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
	ctx.drawImage(img3, -wsize / 2, -hsize / 2, wsize, hsize);
	ctx.restore();
}

// 旋转图标
function renderIconRotate(ctx, left, top, styleOverride, fabricObject) {
	const wsize = 40;
	const hsize = 40;
	ctx.save();
	ctx.translate(left, top);
	ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
	ctx.drawImage(img4, -wsize / 2, -hsize / 2, wsize, hsize);
	ctx.restore();
}

// 删除图标
function renderIconDel(ctx, left, top, styleOverride, fabricObject) {
	const wsize = 20;
	const hsize = 20;
	ctx.save();
	ctx.translate(left, top);
	ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
	ctx.drawImage(img5, -wsize / 2, -hsize / 2, wsize, hsize);
	ctx.restore();
}

// 删除事件
function deleteObject(eventData, transform) {
	let target = transform.target;
	let canvas = target.canvas;
	canvas.remove(target);
	canvas.requestRenderAll();
}


// 选中样式列表
function initControls(canvas) {
	//样式
	initStyle(canvas);

	//双指缩放
	initGesture(canvas);
}

//双指缩放
function initGesture(canvas) {
	const hammer = new Hammer(canvas.upperCanvasEl);
	hammer.get('pinch').set({
		enable: true
	});
	hammer.on('pinchstart', (ev) => {
		const activeObj = canvas.getActiveObject();
		if (activeObj) {
			activeObj.scale = ev.scale;
			activeObj.set({
				lockMovementX: true,
				lockMovementY: true,
			});
		}
	});
	hammer.on("pinchmove", (ev) => {
		const activeObj = canvas.getActiveObject();
		if (activeObj) {
			let ratio = 0
			if(ev.scale > activeObj.scale) ratio = 0.05;
			if(ev.scale < activeObj.scale) ratio = -0.05;
			if(activeObj.scaleX < 1) ratio = ratio * 0.2
			if(activeObj.scaleX < 0.5) ratio = ratio * 0.2
			if(activeObj.scaleX > 1) ratio = ratio * 0.6
			activeObj.scaleX += ratio;
			activeObj.scaleY += ratio;
			
			activeObj.top -= activeObj.height * ratio / 2
			activeObj.left -= activeObj.width * ratio / 2
			
			activeObj.scale = ev.scale;
			canvas.renderAll();
			// let container = document.getElementById('stage');
			// var textarea = document.createElement('textarea');
			// //textarea.textContent = JSON.stringify(ev)
			// textarea.textContent = ev.scale+""
			// container.appendChild(textarea);
		}
	});
	canvas.on("mouse:up", (ev) => {
		const activeObj = canvas.getActiveObject();
		if (activeObj) {
			activeObj.set({
				lockMovementX: false,
				lockMovementY: false,
			});
		}
	});
}


//控制样式
function initStyle(canvas) {
	// fabric.utils
	fabric.Object.prototype.controls.ml = new fabric.Control({
		x: -0.5,
		y: 0,
		offsetX: -1,
		cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
		actionHandler: fabric.controlsUtils.scalingXOrSkewingY,
		getActionName: fabric.controlsUtils.scaleOrSkewActionName,
		cursorStyle: 'pointer',
		render: renderIcon
	});

	fabric.Object.prototype.controls.mr = new fabric.Control({
		x: 0.5,
		y: 0,
		offsetX: 1,
		cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
		actionHandler: fabric.controlsUtils.scalingXOrSkewingY,
		getActionName: fabric.controlsUtils.scaleOrSkewActionName,
		cursorStyle: 'pointer',
		render: renderIcon
	});

	fabric.Object.prototype.controls.mb = new fabric.Control({
		x: 0,
		y: 0.5,
		offsetY: 1,
		cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
		actionHandler: fabric.controlsUtils.scalingYOrSkewingX,
		getActionName: fabric.controlsUtils.scaleOrSkewActionName,
		cursorStyle: 'pointer',
		render: renderIconHoz
	});

	fabric.Object.prototype.controls.mt = new fabric.Control({
		x: 0,
		y: -0.5,
		offsetY: -1,
		cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
		actionHandler: fabric.controlsUtils.scalingYOrSkewingX,
		getActionName: fabric.controlsUtils.scaleOrSkewActionName,
		cursorStyle: 'pointer',
		render: renderIconHoz
	});

	fabric.Object.prototype.controls.tl = new fabric.Control({
		x: -0.5,
		y: -0.5,
		cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
		actionHandler: fabric.controlsUtils.scalingEqually,
		cursorStyle: 'pointer',
		render: renderIconEdge
	});

	fabric.Object.prototype.controls.tr = new fabric.Control({
		x: 0.5,
		y: -0.5,
		cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
		actionHandler: fabric.controlsUtils.scalingEqually,
		cursorStyle: 'pointer',
		render: renderIconEdge
	});

	fabric.Object.prototype.controls.bl = new fabric.Control({
		x: -0.5,
		y: 0.5,
		cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
		actionHandler: fabric.controlsUtils.scalingEqually,
		cursorStyle: 'pointer',
		render: renderIconEdge
	});

	fabric.Object.prototype.controls.br = new fabric.Control({
		x: 0.5,
		y: 0.5,
		cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
		actionHandler: fabric.controlsUtils.scalingEqually,
		cursorStyle: 'pointer',
		render: renderIconEdge
	});

	fabric.Object.prototype.controls.mt = new fabric.Control({
		x: 0,
		y: -0.5,
		offsetY: -15,
		offsetX: 0,
		cursorStyle: 'pointer',
		cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,
		render: renderImgText,
		cornerSize: 24
	});

	fabric.Object.prototype.controls.mtr = new fabric.Control({
		x: 0,
		y: 0.5,
		cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,
		actionHandler: fabric.controlsUtils.rotationWithSnapping,
		offsetY: 30,
		withConnecton: false,
		actionName: 'rotate',
		cursorStyle: 'pointer',
		render: renderIconRotate
	});

	fabric.Object.prototype.controls.deleteControl = new fabric.Control({
		x: -0.5,
		y: -0.5,
		offsetY: 0,
		offsetX: 0,
		cursorStyle: 'pointer',
		mouseUpHandler: deleteObject,
		render: renderIconDel,
		cornerSize: 24
	});

	// Customize controls
	fabric.Object.prototype.set({
		transparentCorners: false,
		borderColor: '#51B9F9',
		cornerColor: '#909090',
		borderScaleFactor: 2.5,
		padding: 6,
		cornerStyle: 'circle',
		cornerStrokeColor: '#0E98FC',
		borderOpacityWhenMoving: 1
	});

	canvas.selectionColor = 'rgba(46, 115, 252, 0.11)';
	canvas.selectionBorderColor = 'rgba(98, 155, 255, 0.81)';
	canvas.selectionLineWidth = 1.5;


	//单独指定text和textbox
	const textBoxControls = {};
	textBoxControls.mtr = fabric.Object.prototype.controls.mtr;
	textBoxControls.tr = fabric.Object.prototype.controls.tr;
	textBoxControls.br = fabric.Object.prototype.controls.br;
	textBoxControls.tl = fabric.Object.prototype.controls.tl;
	textBoxControls.bl = fabric.Object.prototype.controls.bl;
	textBoxControls.deleteControl = fabric.Object.prototype.controls.deleteControl;
	// textBoxControls.mt = fabric.Object.prototype.controls.mt;
	// textBoxControls.mb = fabric.Object.prototype.controls.mb;

	textBoxControls.ml = new fabric.Control({
		x: -0.5,
		y: 0,
		offsetX: -1,
		cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
		actionHandler: fabric.controlsUtils.changeWidth,
		actionName: 'resizing',
		render: renderIcon
	});

	textBoxControls.mt = new fabric.Control({
		x: 0,
		y: -0.5,
		offsetY: -15,
		offsetX: 0,
		cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
		actionHandler: fabric.controlsUtils.changeWidth,
		actionName: 'resizing',
		render: renderText
	});

	textBoxControls.mr = new fabric.Control({
		x: 0.5,
		y: 0,
		offsetX: 1,
		cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
		actionHandler: fabric.controlsUtils.changeWidth,
		actionName: 'resizing',
		render: renderIcon
	});

	fabric.Textbox.prototype.controls = textBoxControls;
	fabric.Text.prototype.controls = textBoxControls;
}

export default initControls;